<template>
    <div id="login">
        <div class="part-one">
            <div></div>
        </div>

        <div class="window">

            <div class="logo-name" style="margin-top: 30px;margin-left:30px;">
                <img src="../../assets/logo.png" style="width: 40px;height:40px;" alt="">
                <span>Z时代</span>
            </div>

            <div class="token-qr">
                <div class="token">
                    <el-input v-model="tokenStr" maxlength="10" show-word-limit placeholder="请输入登录口令"></el-input>
                </div>
                <div class="qr">
                    <vue-q-r-code-component
                        text="http://zero-trust.smartopen.cn"
                    >
                    </vue-q-r-code-component>
                </div>
            </div>

            <el-divider></el-divider>
            <el-text class="mx-1" type="warning">提示：扫描右侧二维码获取登录口令</el-text>


        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElDivider, ElLoading,ElMessage } from "element-plus"
import { loginApi } from "../../network/login"
import {useRouter} from "vue-router"
import {saveLocalData} from "../../utils/utils"
import VueQRCodeComponent  from "vue-qrcode-component"

const router = useRouter()

var tokenStr = ref("")

watch(tokenStr, (newValue, oldVale) => {
    if (newValue.length == 10) {
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        console.log(oldVale)
        loginApi(newValue).then(res => {
            loading.close()
            if(res.code==0){
                ElMessage({
                    message:"登录成功",
                    type:"success"
                })
                saveLocalData("publicKey",res.data.public_key,(res)=>{
                    console.log(res)
                    router.push("/")
                })
            }else{
                ElMessage({
                    message:res.errmsg,
                    type:"warning"
                })
            }
        })
    }
})
</script>

<style scoped>
#login {
    height: 100vh;
}

#login .part-one div {
    width: 0;
    height: 0;
    border-left: 350px solid #fff;
    border-bottom: 280px solid transparent;
}



#login .part-one {
    float: right;
    width: 50%;
    height: 500px;
    background-color: #1b85d6;
    position: relative;
    overflow: hidden;
    z-index: -1;
}

#login .part-one::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    border-width: 10px 0px 400px 1100px;
    border-style: solid;
    border-color: transparent transparent white transparent;
    width: 0;
    height: 0;
    z-index: 1;
}

#login .window {
    position: absolute;
    width: 33%;
    top: 180px;
    left: 33%;
    background-color: #00000010;
    border-radius: 10px;
    padding: 20px;
}


#login .window .logo-name {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

#login .window .logo-name span {
    margin-left: 10px;
    font-size: large;
}

#login .window .token-qr {
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

#login .window .token-qr .token .el-input {
    font-size: larger;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bolder;
}

#login .window .token-qr .qr {
    padding: 20px;
}
</style>